<!DOCTYPE html>
<html lang="en">

<head>
    <title>门禁绑定</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="../css/global.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/iconfont/iconfont.css">
    <link rel="stylesheet" href="../css/accessControl.css">
    <script src="../js/vue.js"></script>
    <script src="../js/axios.js"></script>
    <link rel="stylesheet" href="../css/nutui/dist/nutui.css">
    <script src="../css/nutui/dist/nutui.js"></script>
</head>

<body>
    <div id="app">
        <div class="app_header">
            <div class="app_headerLeft" @click="back">
                <span class="iconfont icon-arrow-left-bold"></span>
            </div>
            <div class="app_headerTitle">添加门禁</div>
        </div>
        <div class="app_main">
            <div class="app_mainBox">
                <div class="app_mainBoxItem" @click="goSaoyisao">
                    <div class="boxIcon">
                        <span class="iconfont icon-saoyisao"></span>
                    </div>
                    <div class="boxTxt">
                        <div class="title">扫一扫</div>
                        <div class="tips">扫一扫在设备上的二维码</div>
                    </div>
                </div>
                <div class="app_mainBoxItem" @click="goLanya">
                    <div class="boxIcon">
                        <span class="iconfont icon-lanya"></span>
                    </div>
                    <div class="boxTxt">
                        <div class="title">蓝牙发现</div>
                        <div class="tips">通过蓝牙匹配设置</div>
                    </div>
                </div>
                <div class="app_mainBoxItem" @click="goBianma">
                    <div class="boxIcon">
                        <span class="iconfont icon-bianma"></span>
                    </div>
                    <div class="boxTxt">
                        <div class="title">SN编码</div>
                        <div class="tips">通过输入设备SN编码添加设备</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 编码弹窗 -->
        <nut-popup v-model="bianmaShow" position="right" :style="{ height: '100vh',width: '100vw' }">
            <div class="app_header">
                <div class="app_headerLeft" @click="bianmaShow = false">
                    <span class="iconfont icon-arrow-left-bold"></span>
                </div>
                <div class="app_headerTitle">输入SN编码添加设备</div>
            </div>
            <div class="popupMain">
                <div class="popupMainItem">
                    <input type="text" v-model="inputVal" placeholder="输入设备SN编码">
                </div>
            </div>
            <nut-button block @click="saveBtn">确定</nut-button>
        </nut-popup>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                saoyisaoShow: false,
                lanyaShow: false,
                bianmaShow: false,
                inputVal: ''
            },
            mounted() { },
            methods: {
                back() {
                    window.history.go(-1)
                },
                goSaoyisao(){
                    this.$toast.fail('暂未开放此功能！');
                },
                goLanya(){
                    this.$toast.fail('暂未开放此功能！');
                },
                goBianma(){
                    this.bianmaShow = true
                },
                saveBtn(){
                    if(this.inputVal != ''){
                        console.log('设备的SN编码', this.inputVal)
                        this.bianmaShow = false
                    }else {
                        this.$dialog({
                            id: 'my-dialog',
                            title: "提示",
                            content: "请输入设备的SN编码",
                            closeBtn: true,  //显式右上角关闭按钮
                            onOkBtn(event) {  //确定按钮点击事件
                                this.close(); //关闭对话框
                            },
                            onCancelBtn(event) {  //取消按钮点击事件，默认行为关闭对话框
                                //return false;  //阻止默认“关闭对话框”的行为
                            },
                            onCloseBtn(event) { //右上角关闭按钮点击事件
                                //return false;  //阻止默认“关闭对话框”的行为
                            },
                        });
                    }
                }
            }
        })
    </script>
</body>

</html>